import React from 'react';
import { Drawer } from "antd";

export default function WorkShow({onClose,open,workid}){
	const content =()=>{
		switch(workid){
			case 1:
                return (
                    <div>
                        <h2>PuppetMaster</h2>
                        <p>该项目基于Electron框架开发,是一款脚本工具软件,用户可以通过截图自定义图色识别,键盘,鼠标操作的脚本,可以保存在本地并读取,可以编辑脚本文件.</p>
						<img alt="workshow1" src={process.env.PUBLIC_URL+'/assets/puppetmaster.png'} style={{width:'100%'}}/>
						<p>项目技术点</p>
						<ul>
						<li>将electron与第三方模块opencv与robotjs集成</li>
						<li>采用bootstrap框架优化界面</li>
						<li>嵌入第三方exe截图工具实现用户截图,允许设置图片点击锚点</li>
						<li>采用json文件储存用户脚本,允许直接允许或进行编辑</li>
						<li>允许用户自定义输入的字符串,同时允许模糊搜索显示关键按键名称</li>
						<li>程序有控制台进行操作消息实时输出</li>
						</ul>
						<img alt="workshow2" src={process.env.PUBLIC_URL+'/assets/pm2.png'} style={{width:'100%'}}/>
						<p>项目地址:<a href="https://github.com/scriptLin-bjtu/PuppetMaster" target='_blank' rel="noopener noreferrer">PuppetMaster</a></p>
                    </div>
                );
            case 2:
                return (
                    <div>
                        <h2>bbs网站</h2>
                        <p>该项目基于React框架开发,实现了论坛网站的基本需求,包含登陆注册,浏览帖子,发帖,设置个人信息,评论帖子等.</p>
                    	<img alt="workshow3" src={process.env.PUBLIC_URL+'/assets/bbs.png'} style={{width:'100%'}}/>
                    	<p>项目技术点</p>
                    	<ul>
                    	<li>使用 React.js 构建整个前端界面，利用其组件化和虚拟 DOM 的特性来提高开发效率和性能。</li>
                    	<li>使用 Ant Design 组件库来构建界面，提供了丰富的 UI 组件和设计风格，使得界面更加美观和易用。</li>
                    	<li>利用 React Router 实现前端路由管理，实现页面间的导航和路由切换，使用户可以在不同页面间流畅切换。</li>
                    	<li>采用 Context API 或 Redux 进行状态管理，用于全局状态的共享和管理，使得组件间的通信更加方便和可控。</li>
                    	<li>实现用户身份认证和权限管理，区分不同用户的权限和角色，保障论坛的安全性和稳定性。</li>
                    	<li>实现用户上传图片并在前端进行预览和处理，限制图片大小、格式和数量，提高论坛帖子的丰富度。</li>
						<li>采用响应式设计实现网站在不同设备上的适配和响应，确保用户在不同设备上都能够良好地浏览和操作论坛。</li>
                    	</ul>
						<img alt="workshow4" src={process.env.PUBLIC_URL+'/assets/bbs2.png'} style={{width:'100%'}}/>
                    	<p>项目地址:</p>
                    </div>
                );
			case 3:
			    return (
			        <div>
			            <h2>合同管理系统网站</h2>
			            <p>该项目为全栈项目,实现了基本的合同操作流程,支持多角色合作,合同信息查询,附件上传于下载等功能.</p>
			        	<img alt="workshow7" src={process.env.PUBLIC_URL+'/assets/cs.png'} style={{width:'100%'}}/>
			        	<p>项目技术点</p>
			        	<ul>
			        	<li>技术栈和开发工具:React,antd,react-router-dom,axios,Nodejs,Express,Mysql。</li>
			        	<li>采用JWT进行用户认证</li>
			        	<li>用户分为操作员和管理员,操作员负责:合同起草,会签,定稿,审批,签署,管理员负责:指定会签人,指定审批人.</li>
			        	</ul>
			        	<img alt="workshow8" src={process.env.PUBLIC_URL+'/assets/cs2.png'} style={{width:'100%'}}/>
			        	<p>项目地址:<a href="https://github.com/scriptLin-bjtu/contract_system" target='_blank' rel="noopener noreferrer">合同管理系统</a></p>
			        </div>
			    );
			case 4:
			    return (
			        <div>
			            <h2>VideoStamp</h2>
			            <p>该项目基于Chrome Extension规范开发,是一款已经上架的浏览器扩展应用.实现了对网络视频的记录与定位,可以提高用户的视频浏览体验.</p>
			        	<img alt="workshow7" src={process.env.PUBLIC_URL+'/assets/v2.png'} style={{width:'100%'}}/>
			        	<p>项目技术点</p>
			        	<ul>
			        	<li>技术栈和开发工具:HTML,CSS,JavaScript,Chrome Extension API。</li>
			        	<li>使用 Chrome Storage API 或 IndexedDB 来存储用户记录的视频信息，并确保在不同设备上同步。</li>
			        	<li>提供选项页进行个人配置</li>
			        	</ul>
			        	<img alt="workshow8" src={process.env.PUBLIC_URL+'/assets/videostamp.png'} style={{width:'100%'}}/>
			        	<p>项目地址:<a href="https://microsoftedge.microsoft.com/addons/detail/jibmphcfhkdhjghlgjeobjaoicgdjbao" target='_blank' rel="noopener noreferrer">VideoStamp</a></p>
			        </div>
			    );		
            default:
                return null;
		}
	}
	
	
	return (
	<>
	<Drawer title="项目介绍" onClose={onClose} open={open}>
	    {content()}
	</Drawer>
	</>
	);
}